<template>
  <page-layout>
    <template #search>
      <a-form layout="inline" :model="queryParam">
        <a-form-item label="姓名">
          <a-input v-model:value="queryParam.name" placeholder="请输入姓名" allow-clear />
        </a-form-item>
        <a-form-item label="性别">
          <a-input v-model:value="queryParam.sex" placeholder="请输入性别" allow-clear />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="bindSearch">查询</a-button>
            <a-button @click="resetSearch">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </template>
    <template #operate>
      <a-button type="primary">新建</a-button>
      <a-button>批量</a-button>
    </template>
    <div>
      <a-table
        :columns="columns"
        :row-key="bindRowKey"
        :data="tableData"
        :pagination="pagination"
        :loading="loading"
        @page-change="handlePageChange"
        @page-size-change="handlePageSizeChange"
        @change="handleDataChange"
      />
    </div>
  </page-layout>
</template>

<script setup>
import { onMounted, reactive, toRefs } from 'vue'
import getSearchMixin from '@/mixins/searchMixin'
import { randomString } from '@/utils/tools'

// search table mixins
const {
  loading,
  queryParam,
  pagination,
  handlePageChange,
  handlePageSizeChange,
  handleDataChange,
  bindSearch,
  resetSearch
} = getSearchMixin(loadData)
const state = reactive({
  columns: [
    {
      title: 'Name',
      dataIndex: 'name'
    },
    {
      title: 'Gender',
      dataIndex: 'gender'
    },
    {
      title: 'Email',
      dataIndex: 'email'
    }
  ],
  tableData: []
})
const { columns, tableData } = toRefs(state)

/**
 * 加载数据 callback
 */
function loadData() {
  const { current, pageSize } = pagination
  const pagr = {
    ...queryParam.value,
    pageNo: current,
    pageSize
  }
  console.log(pagr)

  loading.value = true

  let dataSource = []
  for (let index = 0; index < 10; index++) {
    dataSource.push({
      name: randomString(),
      gender: 'gender---' + randomString(),
      email: 'email@qq.com' + index
    })
  }

  setTimeout(() => {
    loading.value = false
  }, 1000)

  pagination.total = 100
  state.tableData = dataSource
}

onMounted(() => {
  loadData()
})
</script>
